<template>
  <view class="my-prize">
    <view v-if="showLogo" class="my-prize-box" @click="getMyPrize">
      <view class="flex justify-center items-center flex-direction-column">
        <image class="my-prize-icon" src="./image/prize/wodejiangpin.png" mode=""></image>
        <view class="my-prize-text"> 我的奖品 </view>
      </view>
    </view>

    <popup ref="popup" style="z-index: 991" :isMaskClick="true">
      <!-- 我的奖品 -->
      <view
        class="border-card description-box"
        style="position: relative; width: 85%; padding-top: 60rpx"
      >
        <view class="close-btn" @click="$refs.popup.close()">
          <text class="dyicon icon-guanbi"></text>
        </view>

        <view class="flex justify-between items-center">
          <view class="title-box">
            <image class="title-icon" src="./image/ming-dan.png" mode="widthFix"></image>
            <p class="title">{{ listType[type] }}</p>
          </view>
          <p
            style="float: right; font-size: 24rpx; color: blue; cursor: pointer"
            @click="type === 'my' ? getMyPrize($event, 'record') : getMyPrize($event, 'my')"
          >
            {{ type === 'my' ? '抽奖记录' : '我的奖品' }}
          </p>
        </view>

        <view class="list-box">
          <t-table @change="change">
            <t-tr>
              <t-th>奖品</t-th>
              <t-th>日期</t-th>
            </t-tr>
            <scroll-view scroll-y="true" style="max-height: 800rpx; width: 100%">
              <!-- 定时开奖 -->
              <t-tr v-for="(item, index) in $store.state.selfPrize" :key="item.id">
                <t-td style="color: blue" @click.native="toMyCard()">
                  {{ item.prizeName }}
                </t-td>
                <t-td>
                  {{
                    item.lotteryTime
                      ? $moment(item.lotteryTime).format('YYYY年MM月DD日 HH:mm:ss')
                      : ''
                  }}
                </t-td>
              </t-tr>

              <t-tr
                v-for="(item, index) in type === 'my' ? prizes : myLottery.list"
                :key="item.id"
                v-if="(type === 'my' && item.isWinning) || type === 'record'"
              >
                <t-td
                  :style="`color:${item.isWinning ? 'blue' : ''};`"
                  @click.native="item.isWinning && toMyCard()"
                >
                  {{ item.isWinning ? item.lotteryPrize : '未中奖' }}
                </t-td>
                <t-td>
                  {{
                    item.lotteryTime
                      ? $moment(item.lotteryTime).format('YYYY年MM月DD日 HH:mm:ss')
                      : ''
                  }}
                </t-td>
              </t-tr>
            </scroll-view>
          </t-table>
          <view
            v-if="!(type === 'my' ? prizes : myLottery.list).length"
            class="item-prop"
            style="
              justify-content: center;
              border: 1px solid rgb(208, 222, 229);
              border-top: 0;
              padding: 20rpx 10rpx;
              margin: 0;
            "
          >
            暂无
          </view>
        </view>
      </view>
      <!-- / 我的奖品 -->
    </popup>
  </view>
</template>

<script>
  import * as Api from '@/server/index.js';
  import * as Utils from '@/utils/index.js';
  import * as Constant from '@/constant/index.js';
  import popup from '@/components/popup/index.vue';
  import tTable from '@/components/t-table/t-table.vue';
  import tTh from '@/components/t-table/t-th.vue';
  import tTr from '@/components/t-table/t-tr.vue';
  import tTd from '@/components/t-table/t-td.vue';

  export default {
    name: 'myPrize',
    components: {
      popup,
      tTable,
      tTh,
      tTr,
      tTd,
    },
    props: {
      jobId: {
        type: String | Number,
        default: '',
        require: true,
      },
      showLogo: {
        type: Boolean,
        default: true,
      },
      jobInfo: {
        // 活动信息
        type: Object,
        default: () => {},
      },
    },
    data() {
      return {
        myLottery: {
          list: [],
        },
        type: 'my',
        listType: {
          my: '我的奖品',
          record: '抽奖记录',
        }, // my 我的奖品 / record 抽奖记录
      };
    },
    computed: {
      prizes() {
        // 我的奖品
        return this.myLottery.list.filter((item) => item.isWinning);
      },
    },
    async mounted() {
      await this.$onLaunched;
    },
    methods: {
      /**
       * 查看我的奖品
       */
      async getMyPrize(e, type = 'my') {
        await this.isLotteryCheck();
        this.type = type;
        this.$refs.popup.open();
      },
      // 自己的中奖查询
      async isLotteryCheck() {
        Utils.Msg.ShowLoading(true, '加载中...');
        try {
          const { data: res } = await Api.lottery.isLottery(this.jobId);
          if (res.data) {
            this.myLottery.list = res.data;
          }
        } catch (e) {
          console.log('err', e);
        } finally {
          Utils.Msg.HideLoading();
        }
      },
      // 跳转个人卡包
      toMyCard() {
        const url = encodeURIComponent(
          `https://wap2.wxls.pro/coupon/#/pages/coupon/myCoupon?commodityType=0`,
        );
        h5uni.navigateTo({
          url: `/pages/webview/index?url=${url}`, // 跳转个人卡包
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .my-prize {
    position: absolute;
    right: 30rpx;
  }
  .my-prize-box {
    position: relative;
    width: fit-content;
    // position: relative; right: 0; display: flex; justify-content: flex-end
    z-index: 9;

    .my-prize-icon {
      display: block;
      width: 60rpx;
      height: 60rpx;
      background-color: #fff;
      font-size: 36rpx;
      border: 1px solid #fff;
      border-radius: 50%;
    }
    .my-prize-text {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 24rpx;
      padding: 4rpx 20rpx;
      background-color: #f26d22;
      border: 1px solid #fff;
      border-radius: 20rpx;
      margin-top: -16rpx;
      transform: scale(0.6);
    }
  }

  .t-tr {
    .t-td {
      font-size: 24rpx;
    }
  }

  .border-card {
    background-color: #fff;
    margin: 0 30rpx;
    box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.1);
  }
  .description-box {
    margin-top: 30rpx;
    padding: 40rpx 30rpx;
    border-radius: 20rpx;
  }
  .title-box {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
  }

  .title-icon {
    width: 42rpx;
    height: 42rpx;
  }

  .title {
    margin-left: 10rpx;
    font-size: 36rpx;
    font-weight: 700;
  }

  .list-box {
    margin-top: 20rpx;
  }

  .item-prop {
    display: flex;
    justify-content: space-between;
    font-size: 26rpx;
    padding: 0 10rpx;
    margin: 20rpx 0;
    .name {
      flex: 1;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .time {
      margin-left: 10rpx;
    }
  }

  .close-btn {
    position: absolute;
    top: 16rpx;
    right: 16rpx;
    width: 32rpx;
    height: 32rpx;
    font-size: 32rpx;
    line-height: 32rpx;
  }
</style>
